<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{.title}} - PodGrab</title>
    {{template "commoncss" .}}
    <style>
      img {
        display: none;
      }

      h2,
      h3,
      h4,
      h5 {
        margin-bottom: 1rem;
      }
      h4 {
        font-size: 2rem;
      }

      h5 {
        font-size: 1.5rem;
      }
      p {
        margin-bottom: 0.5rem;
      }
      hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }

      .tag .button {
        padding: 0 15px;
      }

      .IsPlayed-true {
        color: #555555;
      }

      /* Larger than tablet */
      @media (min-width: 750px) {
        img {
          display: block;
        }
      }
      .button-enqueue {
        display: none;
      }
      body.playerExists .button-enqueue {
        display: inline-block;
      }

      .podcast-image {
        width: 100px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      {{template "navbar" .}}

      <br />
      <br />{{$setting := .setting}} {{range .tags}}
<div id="tag-{{.ID}}">
      <div class="podcasts row tag">
        <div class="columns two">
          <h4>{{.Label}}</h4>
        </div>
        <div class="columns seven">
          {{range .Podcasts}}
          <img
            class="podcast-image"
            src="{{.Image}}"
            title="{{.Title}}"
            alt="{{.Title}}"
            srcset=""
          />
          {{end}}
        </div>

        <div class="columns three">
          <a
            class="button button"
            onclick="deleteTag('{{.ID}}')"
            title="Delete Tag"
            ><i class="fas fa-trash"></i
          ></a>
          <a
            class="button button"
            onclick="playTag('{{.ID}}')"
            title="Play all episodes of this tag"
            ><i class="fas fa-play"></i
          ></a>
          <a
            class="button button-enqueue"
            onclick="enqueueTag('{{.ID}}')"
            title="Add Episode to existing player playlist"
            ><i class="fas fa-plus"></i
          ></a>
          <a
          class="button"
          href="/tags/{{.ID}}/rss"
          target="_blank"
          title="Get Rss feed for this tag and import this in your favorite podcast player."
          ><i class="fas fa-rss"></i
        ></a>
        </div>
      </div>
      <hr />
    </div>
      {{else}}
      <div class="welcome">
        <p>
          It seems you haven't created any tags yet. Try creating a few new tags
          on the podcast listing page.
        </p>
      </div>
      {{end}}

      <div class="row">
        <div class="columns twelve" style="text-align: center">
          {{if .previousPage }}
          <a
            href="?page={{.previousPage}}&downloadedOnly={{.downloadedOnly}}"
            class="button"
            >Newer</a
          >
          {{end}} {{if .nextPage }}
          <a
            href="?page={{.nextPage}}&downloadedOnly={{.downloadedOnly}}"
            class="button"
            >Older</a
          >
          {{end}}
        </div>
      </div>
    </div>

    {{template "scripts"}}
    <script>
     
      function deleteTag(id) {
        var confirmed = confirm(
          "Are you sure you want to delete this tag? This action cannot be reversed."
        );
        if (!confirmed) {
          return false;
        }
        axios
          .delete("/tags/" + id )
          .then(function (response) {
            Vue.toasted.show("Tag deleted.", {
              theme: "bubble",
              type: "success",
              position: "top-right",
              duration: 5000,
            });
            var row = document.getElementById("tag-" + id);
            row.remove();
          })
          .catch(function (error) {
            if (
              error.response &&
              error.response.data &&
              error.response.data.message
            ) {
              Vue.toasted.show(error.response.data.message, {
                theme: "bubble",
                type: "error",
                position: "top-right",
                duration: 5000,
              });
            }
          })
          .then(function () {});
        return false;
      }
    </script>
    <script>
      const socket = getWebsocketConnection(
        function (event) {
          const message = getWebsocketMessage("Register", "Tags");
          socket.send(message);
        },
        function (x) {
          const msg = JSON.parse(x.data);
          if (msg.messageType == "NoPlayer") {
            document.body.classList.remove("playerExists");
          }
          if (msg.messageType == "PlayerExists") {
            document.body.classList.add("playerExists");
          }
        }
      );
      function enqueueTag(id) {
        if (!socket) {
          return;
        }
        socket.send(getWebsocketMessage("Enqueue", `{"tagIds":["${id}"]}`));
        Vue.toasted.show("Episodes enqueued.", {
              theme: "bubble",
              type: "success",
              position: "top-right",
              duration: 5000,
            });
      }
      
      function playTag(id) {
        openPlayer("","", [id]);
      }
    </script>
  </body>
</html>
